<template>
	<view class="container">
		<!-- 帖子标题 -->
		<view class="post-title">{{ article.forumTitle }}</view>

		<!-- 帖子内容 -->
		<view class="post-content">
			<rich-text :nodes="article.forumMessage"></rich-text>
		</view>

		<!-- 发布者信息 -->
		<view class="post-info">
			<text>发布者: {{ article.nickname }}-({{article.account}})</text>
			<br />
			<text>发布时间: {{article.forumCreatTime }}</text>
		</view>
		<!-- 点赞按钮 -->
		<!-- <view class="like-section">
			<button @click="toggleLike" :class="{ liked: post.isLiked }">
				<text>{{ }} 赞</text>
			</button>
		</view> -->

		<!-- 评论区 -->
		<view class="comments-section">
			<view v-for="(item, index) in post" :key="index" class="comment-item">
				<text>{{ item.nickname }}({{item.account}}): {{ item.postMessage }}</text>
			</view>
		</view>
		<!-- 添加评论 -->
		<view class="add-comment">
			<input v-model="new_postMessage" placeholder="添加评论..." />
			<button @click="addComment">发表</button>
		</view>
	</view>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'

	export default {
		onLoad: function(option) {
			//option为object类型，会序列化上个页面传递的参数
			console.log("参数id：" + option.id); //打印出上个页面传递的参数。
			this.article = JSON.parse(JSON.stringify(this.getForumId(option.id)));
			const dateObj = new Date(this.article.forumCreatTime);
			// 时间格式化为其他格式
			this.article.forumCreatTime = dateObj.toLocaleString('zh-CN', {
				year: 'numeric',
				month: 'long',
				day: 'numeric',
				hour: '2-digit',
				minute: '2-digit',
				second: '2-digit',
				hour12: false
			});
			console.log("数据：", this.article); //打印出上个页面传递的参数。
			this.get_post(option.id) //通过forumId获取帖子回复数据
		},
		data() {
			return {
				article: {},
				post: [],
				new_postMessage: ''
			};
		},
		methods: {
			//通过forumId获取帖子回复数据
			get_post(id) {
				uni.request({
					url: 'http://localhost:3000/users/forum/post',
					method: 'get',
					data: {
						forumId: id
					},
					success: (res) => {
						this.post = res.data
						console.log("res:", res);
					},
					fail: (err) => {
						console.error("请求失败:", err);
					}
				});
			},
			// 添加评论
			addComment() {
				if (this.new_postMessage.trim()) {
					uni.request({
						url: 'http://localhost:3000/users/forum/post',
						method: 'POST', // 修改为 POST 请求
						data: {
							forumId: this.article.forumId,
							userId: this.user.userId,
							postMessage: this.new_postMessage,
						},
						success: (res) => {
							this.post.push({
								userId: this.user.userId,
								nickname: this.user.nickname,
								account: this.user.account,
								postMessage: this.new_postMessage,
							});
							this.new_postMessage = ''; // 清空输入框
							console.log("res:", res);
						},
						fail: (err) => {
							console.error("请求失败:", err);
						}
					});
				}

			},

		},
		computed: {
			...mapGetters('course', ['getForumId']),
			...mapState('user', ['user']),
		},
	};
</script>

<style scoped>
	.container {
		padding: 20rpx;
	}

	.post-title {
		font-size: 52rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.post-content {
		margin-bottom: 50rpx;
	}

	.post-info {
		margin-bottom: 40rpx;
	}

	.like-section button {
		background-color: #ff6347;
		color: white;
		border: none;
		padding: 10rpx 20rpx;
		border-radius: 100rpx;
		cursor: pointer;
	}

	.like-section .liked {
		background-color: #ff4500;
	}

	.comments-section {
		margin-top: 80rpx;
	}

	.comment-item {
		margin-bottom: 20rpx;
	}

	.add-comment {
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		/* bottom: calc(var(--window-bottom)+30rpx); */
		bottom: 30rpx;
		display: flex;
		align-items: center;
		background-color: aliceblue;
	}

	.add-comment input {
		flex: 1;
		padding: 20rpx;
		border: 1rpx solid #ccc;
		border-radius: 5rpx;
		margin-right: 10rpx;
	}

	.add-comment button {

		width: 100rpx;
		height: 100rpx;
		padding: 8rpx 8rpx;
		background-color: #007bff;
		color: white;
		border: none;
		border-radius: 10rpx;
		cursor: pointer;
	}
</style>